<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="dice">
    <meta name="author" content="weina">
    <title>player login</title>
    <link rel="stylesheet" href="/css/bootstrap.css">
    <script src="/js/jquery-3.3.1.min.js"></script>
    <script src="/js/bootstrap.js"></script>

    <style type="text/css">
        .form {
            width: 400px;
            margin: 100px auto;
        }

        #login_form {
            display: block;
        }

        .fa {
            display: inline-block;
            top: 27px;
            left: 6px;
            position: relative;
            color: #ccc;
        }

        input[type="text"], input[type="password"] {
            padding-left: 26px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="form row">
        <div class="form-horizontal col-sm-offset-3 col-md-offset-3" id="login_form">
            <h3 class="form-title">Login to your account</h3>
            <div class="col-sm-12 col-md-12">
                <div class="form-group">
                    <i class="fa fa-user fa-lg"></i>
                    <input class="form-control required" type="text" placeholder="Username" name="username"
                           autofocus="autofocus"/>
                </div>
                <div class="form-group">
                    <i class="fa fa-lock fa-lg"></i>
                    <input class="form-control required" type="password" placeholder="Password" name="password"/>
                </div>
                <div class="form-group">
                    <input type="button" class="btnSubmit btn btn-success pull-right" value="Login  "/>
                </div>
            </div>
        </div>
    </div>
</div> <!-- /container -->

<script type="text/javascript">

    $(document).keyup(function (event) {
        if (event.keyCode === 13) {
            $(".btnSubmit").trigger("click");
        }
    });

    $('.btnSubmit').bind('click', function () {
        login();
    });

    function login() {
        var userName = $("input[name='username']").val();
        var pwd = $("input[name='password']").val();
        var param = {playerName: userName, playerPwd: pwd};
        console.log(param)
        $.ajax({
            type: "post",
            dataType: "json",
            contentType: "application/x-www-form-urlencoded;charset=UTF-8",
            url: "/player/playerLogin",
            data: param,
            success: function (data) {
                if (data.result === "success" && data.bizCode==="E_0000") {
                    location.href = "joinHome";
                }else{
                    alert(data.bizMsg);
                }
            }
        });
    }

</script>
</body>
</html>